<script setup lang="ts">
import { test } from '@/api'
import { message } from 'ant-design-vue'
import { reactive, ref, watchPostEffect } from 'vue'
import Desc from './Desc.vue'

const ns = 'PageEolink'
const getItem = (key: string, defaultVal = '') => localStorage.getItem(ns + key) || defaultVal
const setItem = (key: string, val = '') => localStorage.setItem(ns + key, val)

const urlKey = 'inputValRef'
const resultKey = 'textValRef'
const formData = reactive({
  url: getItem(urlKey),
  result: getItem(resultKey)
})
const tempKey = 'tempValRef'
const tempValRef = ref(getItem(tempKey))
const loadingRef = ref(false)

watchPostEffect(() => {
  // 修改 inputValRef 和 textValRef 的时候更新 localStore
  setItem(urlKey, formData.url)
  setItem(resultKey, formData.result)
  setItem(tempKey, tempValRef.value)
})

function onsubmit(e: unknown) {
  loadingRef.value = true

  test.getTest()
  setTimeout(() => {
    loadingRef.value = false
    message.success('加载完成')
  }, 10000)
}
</script>

<template>
  <div class="wrapper">
    <a-form layout="vertical" :model="formData" @finish="onsubmit">
      <a-form-item name="url" label="URL" required>
        <div class="input-box">
          <a-input v-model:value="formData.url" size="large" placeholder="输入www.eolink.com列表或详情页URL" />
          <a-button :loading="loadingRef" size="large" html-type="submit">发送</a-button>
        </div>
      </a-form-item>
      <a-form-item name="result" label="返回结果">
        <a-textarea v-model:value="formData.result" name="result" :cols="120" :rows="10"
          placeholder="生成结果在这，可以编辑后进行复制，通过下方模版配置进入自定义预设" />
      </a-form-item>
      <a-form-item label="模板配置">
        <a-textarea v-model:value="tempValRef" name="result" :cols="120" :rows="10" placeholder="模版配置" />
      </a-form-item>
    </a-form>
    <Desc />
  </div>
</template>

<style lang="less">
h1,
h2,
h3,
h4,
h5 {
  text-align: left;
}

.input-box {
  display: flex;
  text-align: left;
  align-items: center;
  gap: 1em;

}

input {
  width: 100%;
  line-height: 3;
}

.wrapper {
  position: relative;
}
</style>
